{extends file="assets::smarty-templates::Master"|ToPath}
{block name=content}

<form method="post" action="{$action}">
    <div class="tabs">
        <ul>
            <li><a href="#Identificacion">Identificacion de la empresa</a></li>
            <li><a href="#Requerimiento">Requerimiento</a></li>
        </ul>

        <div id="Identificacion">
            <dl>
                <dt>
                    <label for="NombreEmpresa">Seleccione su empresa.</label>
                </dt>
                <dd>
                    <select name="{bind name="NitEmpresa" to="NitEmpresa"}" id="NombreEmpresa">
                        {foreach $companies as $company}
                        <option value="{$company->getNit()}">{$company->getNombre()}</option>
                        {/foreach}
                    </select>
                </dd>
            </dl>
            <fieldset>
                <legend>Datos del solicitante</legend>
                <dl>
                    <dt>
                        <label for="NombreSolicitante">Nombre de quien diligencia este formulario</label>
                    </dt>
                    <dd>
                        <input type="text" id="NombreSolicitante"
                               name="{bind name="NombreSolicitante" to="Solicitante.Nombre"}"/>
                    </dd>
                </dl>
                <dl>
                    <dt>
                        <label for="AreaSolicitante">&Aacute;rea</label>
                    </dt>
                    <dd>
                        <input type="text" id="AreaSolicitante"
                               name="{bind name="AreaSolicitante" to="Solicitante.Area"}"/>
                    </dd>
                </dl>
                <dl>
                    <dt>
                        <label for="CargoSolicitante">Cargo</label>
                    </dt>
                    <dd>
                        <input type="text" id="CargoSolicitante"
                               name="{bind name="CargoSolicitante" to="Solicitante.Cargo"}"/>
                    </dd>
                </dl>
                <dl>
                    <dt>
                        <label for="EmailSolicitante">Email</label>
                    </dt>
                    <dd>
                        <input type="text" id="EmailSolicitante"
                               name="{bind name="EmailSolicitante" to="Solicitante.Email"}"/>
                    </dd>
                </dl>
                <dl>
                    <dt>
                        <label for="TelefonoSolicitante">Tel&eacute;fono</label>
                    </dt>
                    <dd>
                        <input type="text" id="TelefonoSolicitante"
                               name="{bind name="TelefonoSolicitante" to="Solicitante.Telefono"}"/>
                    </dd>
                </dl>
                <dl>
                    <dt>
                        <label for="ExtensionSolicitante">Extensi&oacute;n</label>
                    </dt>
                    <dd>
                        <input type="text" id="ExtensionSolicitante"
                               name="{bind name="ExtensionSolicitante" to="Solicitante.Extension"}"/>
                    </dd>
                </dl>
            </fieldset>
            <input type="button" value="Siguiente" id="botonSiguiente"/>
        </div>

        <div id="Requerimiento">
            <fieldset>
                <legend>Perfil requerido</legend>
                <dl>
                    <dt><label for="CodigoPlan">Programa</label></dt>
                    <dd>
                        <select name="{bind name="PlanEstudio" to="CodigoPlan"}" id="CodigoPlan">
                        {foreach $careers as $plan}
                            <option value="{$plan->getCodigoPlan()}">{$plan->getNombrePlan()}</option>
                        {/foreach}
                        </select>
                    </dd>
                </dl>
                <dl>
                    <dt><label for="DescripcionPerfil">
                            Perfil del etudiante
                            <blockquote>
                                Describa brevemente si requiere destrezas o habilidades espec&iacute;ficas o experiencia laboral por parte del estudiante
                            </blockquote>
                        </label></dt>
                    <dd>
                        <textarea name="{bind name="DescripcionPerfil" to="DescripcionPerfil"}" id="DescripcionPerfil"
                                  cols=""
                                  rows="6">
                        </textarea>
                    </dd>
                </dl>
                <dl>
                    <dt>
                        <label for="FechaIniciacion">
                            Fecha de iniciaci&oacute;n de la pr&aacute;ctica
                        </label>
                    </dt>
                    <dd>
                        <input name="{bind name="FechaIniciacion" to="FechaIniciacion"|filter:"DateToJson('m/d/y')"}" id="FechaIniciacion" />
                    </dd>
                </dl>
                <dl>
                    <dt>
                        <label for="FechaFinalizacion">
                            Fecha de finalizaci&oacute;n de la pr&aacute;ctica
                        </label>
                    </dt>
                    <dd>
                        <input name="{bind name="FechaFinalizacion" to="FechaFinalizacion"|filter:"DateToJson('m/d/y')"}" id="FechaFinalizacion" />
                    </dd>
                </dl>
            </fieldset>
            <fieldset>
                <legend>Datos Ubicaci&oacute;n del Estudiante Solicitado en Pr&aacute;cticas Profesionales </legend>
                <dl>
                    <dt>
                        <label for="AreaTrabajo">
                            &Aacute;rea o Departamento a asignar
                        </label>
                    </dt>
                    <dd>
                        <input type="text" name="{bind name="AreaTrabajo" to="AreaTrabajo"}" id="AreaTrabajo" />
                    </dd>
                </dl>

                <dl>
                    <dt>
                        <label for="Cargo">
                            Cargo
                        </label>
                    </dt>
                    <dd>
                        <input type="text" name="{bind name="Cargo" to="Cargo"}" id="Cargo" />
                    </dd>
                </dl>

                <dl>
                    <dt>
                        <label for="NombreTutor">
                            Nombre del tutor
                        </label>
                    </dt>
                    <dd>
                        <input type="text" name="{bind name="NombreTutor" to="Tutor.Nombre"}" id="NombreTutor" />
                    </dd>
                </dl>

                <dl>
                    <dt>
                        <label for="CargoTutor">
                            Cargo
                        </label>
                    </dt>
                    <dd>
                        <input type="text" name="{bind name="CargoTutor" to="Tutor.Cargo"}" id="CargoTutor" />
                    </dd>
                </dl>

                <dl>
                    <dt>
                        <label for="TelefonoTutor">
                            Tel&eacute;fono
                        </label>
                    </dt>
                    <dd>
                        <input type="text" name="{bind name="TelefonoTutor" to="Tutor.Telefono"}" id="TelefonoTutor" />
                    </dd>
                </dl>

                <dl>
                    <dt>
                        <label for="ExtensionTutor">
                            Extensi&oacute;n
                        </label>
                    </dt>
                    <dd>
                        <input type="text"
                               name="{bind name="ExtensionTutor" to="Tutor.Extension"}"
                               id="TelefonoTutor"/>
                    </dd>
                </dl>
            </fieldset>
            <fieldset>
                <legend>Ubicaci&oacute;n geogr&aacute;fica del sitio de pr&aacute;cticas</legend>
                <dl>
                    <dt>
                        <label for="DireccionPracticas">
                            Direcci&oacute;n
                        </label>
                    </dt>
                    <dd>
                        <input type="text" name="{bind name="DireccionPracticas" to="DireccionPracticas"}" id="DireccionPracticas" />
                    </dd>
                </dl>

                <dl>
                    <dt>
                        <label for="TelefonoPracticas">
                            Tel&eacute;fono
                        </label>
                    </dt>
                    <dd>
                        <input type="text" name="{bind name="TelefonoPracticas" to="Telefono"}" id="TelefonoPracticas" />
                    </dd>
                </dl>

                <dl>
                    <dt>
                        <label for="PaisUbicacion">
                            Pa&iacute;s
                        </label>
                    </dt>
                    <dd>
                        <select id="PaisUbicacion">
                            <option>- Elegir -</option>
                            {foreach $countries as $country}
                            <option value="{$country->getCodigoPais()}">{$country->getNombre()}</option>
                            {/foreach}
                        </select>
                    </dd>
                </dl>

                <dl>
                    <dt>
                        <label for="DepartamentoUbicacion">
                            Departamento
                        </label>
                    </dt>
                    <dd>
                        <select id="DepartamentoUbicacion">
                        </select>
                    </dd>
                </dl>

                <dl>
                    <dt>
                        <label for="CiudadUbicacion">
                            Ciudad
                        </label>
                    </dt>
                    <dd>
                        <select name="{bind name="CiudadUbicacion" to="CodigoMunicipio"}" id="CiudadUbicacion">
                        </select>
                    </dd>
                </dl>

                <dl>
                    <dt>
                        <label for="EsSucursalPrincipal">
                            Su empresa es
                        </label>
                    </dt>
                    <dd>
                        <input type="radio" 
                               name="{bind name="EsSucursalPrincipal" to="EsSucursalPrincipal"}" 
                               id="sucursal"
                               value="0"
                               style="position: relative !important; left: auto !important;"
                               checked="checked"/>
                        <label for="sucursal">Sucursal</label>

                        <input type="radio" 
                               name="{bind name="EsSucursalPrincipal" to="EsSucursalPrincipal"}"
                               id="principal"
                               value="1"
                               style="position: relative !important; left: auto !important;"/>
                        <label for="principal">Principal</label>
                    </dd>
                </dl>
            </fieldset>
            <input type="submit" value="Enviar solicitud" />
        </div>
    </div>
</form>

<script type="text/javascript">
    var departamentosURL = "{$GetDepartamentos}";
    var minicipiosURL = "{$GetMunicipios}";
    {literal}
    jQuery.noConflict();
    jQuery(document).ready(function($){
        var dates = $( "#FechaIniciacion, #FechaFinalizacion" ).datepicker({
                defaultDate: "+1w",
                changeMonth: true,
                numberOfMonths: 2,
                onSelect: function( selectedDate ) {
                    var option = this.id == "FechaIniciacion" ? "minDate" : "maxDate",
                            instance = $( this ).data( "datepicker" ),
                            date = $.datepicker.parseDate(
                                    instance.settings.dateFormat ||
                                    $.datepicker._defaults.dateFormat,
                                    selectedDate, instance.settings );
                    dates.not( this ).datepicker( "option", option, date );
                }
        });

        $("#botonSiguiente").click(function(){
            $(".tabs").tabs("select", 1);
        });

        $("#PaisUbicacion").change(function(){
            var val = $(this).val();
            $("#DepartamentoUbicacion").html("");
            $("#CiudadUbicacion").html("");
                
            $.ajax({
                url:departamentosURL + val,
                type: 'GET',
                dataType:'json',
                success: function (data){
                        var options = '<option> - Elegir - </option>';
                        for(var i in data){
                            if(typeof data[i] != 'function') {
                                options += '<option value=\"' + data[i].CodigoDepartamento + '\">';
                                options += data[i].Nombre;
                                options += '</options>';
                            }
                        }

                        $("#DepartamentoUbicacion").html(options);
                    }
            });
        });

        $("#DepartamentoUbicacion").change(function(){
            var val = $(this).val();
            $.ajax({
                url:minicipiosURL + val,
                type: 'GET',
                dataType:'json',
                success: function (data){
                        var options = '<option> - Elegir - </option>';
                        for(var i in data){
                            if(typeof data[i] != 'function') {
                                options += '<option value=\"' + data[i].CodigoMunicipio + '\">';
                                options += data[i].Nombre;
                                options += '</options>';
                            }
                        }

                        $("#CiudadUbicacion").html(options);
                    }
            });
        });

    });
    {/literal}
</script>
{/block}